<template>
	<el-dialog title="选择人员" :visible.sync="showDialog" append-to-body :close-on-click-modal="false"
			   custom-class="person-selection-dialog" @close="cancel">
		<div style="height: 633px">
			<person-selection v-if="value"
							  :default-checked="defaultChecked"
							  :params="params"
							  :checked-max="checkedMax"
							  :select-type="selectType"
							  :include-tabs="includeTabs"
							  @tabs-change="tabsChange"
							  @sure="sure"
							  @cancel="cancel">
				<!--中转插槽，再次传入子组件-->
				<template v-for="item in slotList" :slot="item">
					<slot :name="item" :tabs="currentTabs"></slot>
				</template>
			</person-selection>
		</div>
	</el-dialog>
</template>
<script lang="ts">
import {Component, Emit, Prop} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'
import PersonSelection from "@/components-com/person-selection/person-selection";
import PersonModel from "./model/person.model";
import {EventEnum, PersonSelectionTabsEnum} from "./enums/person-selection.enum";
import {SelectionEnum} from "@/components-sys/base-table/enums/base-table.enum";

@Component({components: {PersonSelection}})
export default class PersonSelectionIndex extends BaseVue {
	/*显示隐藏*/
	@Prop(Boolean)
	private value;
	/*回显数据，可以是数组和url*/
	@Prop()
	private defaultChecked: string | PersonModel | PersonModel[];
	/*回显查询的参数*/
	@Prop(Object)
	private params;
	/*勾选方式，checkbox、radio*/
	@Prop({type: String, default: SelectionEnum.checkbox})
	private selectType: SelectionEnum;
	/*最多选择数量*/
	@Prop(Number)
	private checkedMax;
	/*显示哪些默认的标签页*/
	@Prop()
	private includeTabs: PersonSelectionTabsEnum;

	/*插槽列表*/
	private slotList: string[] = [];
	/*当前插槽标签页tabs*/
	private currentTabs = '';

	/*显示隐藏弹窗计算属性*/
	get showDialog() {
		return _.cloneDeep(this.value);
	}

	set showDialog(val) {
	}

	/**
	 * 生命周期mounted
	 */
	private mounted() {
		// 中转插槽获取slot-name
		this.slotList = Object.keys(this.$scopedSlots);
	};

	/**
	 * 标签页切换
	 */
	@Emit()
	private tabsChange(val: string): string {
		this.currentTabs = val
		return val
	}

	/**
	 * 确定返回事件
	 */
	@Emit(EventEnum.sure)
	private sure(val: PersonModel[]): PersonModel[] {
		this.showDialog = false;
		return val
	}

	/**
	 * 确定返回事件
	 */
	@Emit(EventEnum.cancel)
	private cancel() {
		this.showDialog = false;
	}

};
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.person-selection-dialog {
	width: 96%;
	max-width: 1810px;
}
</style>

